<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	   /*初始化工作*/
			*{
			   margin: 0px;
			   padding: 0px;
			   font-size: 14px;
			   font-family: "微软雅黑"；
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
				color: #000;
			}
			/*解决IE图片有边框问题*/
			img{
				border: none;
			}
			.header{
				width: 100%;
				background: #fff url() 0 0 no-repeat;
			}
			/*居中的box*/
			.header .header_mid{
			   width: 1228px;
			   margin:0px auto;
			}
       /* header_banner下分类*/
			.header .header_banner{
				width: 1228px;
				height: 460px;
				position: relative;
			}
			.header .header_banner img{
				width: 1228px;
			}
			/*banner 样式*/
			.header .header_banner .banner li{
				position: absolute;
				left: 0px;
				top: 0px;
			}
			/*banner 左边的导航ul*/
			.header .header_banner .banner_cate{
				width: 234px;
				height: 440px;
				background:  url() 0 0 no-repeat rgba(0,0,0,0.5);
				position: absolute;
				left: 0px;
				top: 0px;
				padding-top: 20px;
			}
			.header .header_banner .banner_cate li{
			    width: 204px;
			    height: 42px;
			    padding-left: 30px;
			    line-height: 42px;
			}
			.header .header_banner .banner_cate li a{
				display: block;
			    width: 184px;
			    height: 42px;
			    color: #FFF;
			}
			.header .header_banner .banner_cate li span{
			   display: block;
			   float: right;
			}
			.header .header_banner .banner_cate li:hover{
				background: #FF6700 url() 0 0 no-repeat;
			}
			.header .header_banner .toleft , .header .header_banner .toright {
				display: block;
			    width: 41px;
			    height: 69px;
			    background: red url() 0 0 no-repeat;
			    position: absolute;
			    top: 175px;
			}
			.header .header_banner .toleft{
				position: absolute;
				left: 234px;
				cursor: pointer;
			    background:  url(./images/click.png) -83px 0 no-repeat;
			}
			.header .header_banner .toright {
			    position: absolute;
				right: 0px;
				cursor: pointer;
				background:  url(./images/click.png) -123px 0 no-repeat;
			}
			.header .header_banner .toleft:hover{
			    background-position: 0 0;
			}
			.header .header_banner .toright:hover {
				background-position: -42px 0;
			}
			.header .header_banner .num{
				height: 18px;
				position: absolute;
				right: 30px;
				bottom: 15px;
			}
			.header .header_banner .num li{
				width: 19px;
				float: left;
			}
			.header .header_banner .num li span{
				display: inline-block;
				width: 6px;
				height: 6px;
				border: 2px solid #606779;
				text-indent: -9999px;
				border-radius: 10px;
				background:  url() 0 0 no-repeat rgba(0,0,0,0.2);
				cursor: pointer;
			}
	</style>
</head>
<body>
	<!-- header -->
	<div class="header">
	    <!-- 居中box -->
		<div class="header_mid">
	     <!-- 分类与banner -->
         <div class="header_banner">
                <ul class="banner" id="banner">
                  <li class="banner_img"><a href=""><img src="./images/banner_1.jpg" alt=""></a></li>
                  <li class="banner_img"><a href=""><img src="./images/banner_2.jpg" alt=""></a></li>
                  <li class="banner_img"><a href=""><img src="./images/banner_3.jpg" alt=""></a></li>
                  <li class="banner_img"><a href=""><img src="./images/banner_4.jpg" alt=""></a></li>
                  <li class="banner_img"><a href=""><img src="./images/banner_5.jpg" alt=""></a></li>
                </ul>
                 <!-- 分类 -->
                <ul class="banner_cate">
                   <li class="li_top"><a href="">手机 平板 电话卡<span>&gt;</span></a></li>
                   <li><a href="">电视 盒子<span>&gt;</span></a></li>
                   <li><a href="">路由器 智能硬件<span>&gt;</span></a></li>
                   <li><a href="">移动电源 插线板<span>&gt;</span></a></li>
                   <li><a href="">耳机 音响<span>&gt;</span></a></li>
                   <li><a href="">电池 储存卡<span>&gt;</span></a></li>
                   <li><a href="">保护套 后盖<span>&gt;</span></a></li>
                   <li><a href="">贴膜 其他配件<span>&gt;</span></a></li>
                   <li><a href="">米兔 服装<span>&gt;</span></a></li>
                   <li><a href="">箱包 其他周边<span>&gt;</span></a></li>
                </ul>
                <!-- 小标签DIV -->
                <span class="toleft" id="toleft" href=""> </span>
                <span class="toright" id="toright" href="">  </span>
                <ul class="num" id="num">
                  <li><span class="click_btn">1</span></li>
                  <li><span class="click_btn">2</span></li>
                  <li><span class="click_btn">3</span></li>
                  <li><span class="click_btn">4</span></li>
                  <li><span class="click_btn">5</span></li>
                </ul>
         </div>
      </div>
    </div>  
</body>
<script type="text/javascript">
     //获取所有类名了banner_img的标签对象
     var banner_img = document.getElementsByClassName("banner_img");
     //获取id为num 的 标签对象 
     var num1 = document.getElementById("num");
     //获取id为banner 得标签对象
     var banner = document.getElementById("banner");
     //获取 click_btn 的所有标签对象
     var click_btn = document.getElementsByClassName("click_btn");
     var toleft = document.getElementById("toleft");
     var toright = document.getElementById("toright");
     //图片切换时间
     var time = 2000;
     var num = 0;
     run();
     //run方法实现显示一张隐藏其他
     function run (){
	     for(var i=0; i<banner_img.length; i++){
	     	banner_img[i].style.display = "none";
	     	click_btn[i].style.backgroundColor= 'rgba(0,0,0,0.3)';
	     	ckickNum(i);
	     }
	     //按顺序显示对应的图片
         banner_img[num].style.display = "block";
         click_btn[num].style.backgroundColor= 'rgba(255,255,255,0.7)';
         if(num>=banner_img.length-1){
         	num=0;
         }else{
         	num++;
         }
     }
     //鼠标进入 图片停止
     banner.onmouseover = function () {
     	 clearInterval(time1);
     }
     //鼠标进入选着区域停止 
     num1.onmouseover = function () {
     	clearInterval(time1);
     }
     //鼠标进入选着区域停止 
     toleft.onmouseover = function () {
     	clearInterval(time1);
     }
     toright.onmouseover = function () {
     	clearInterval(time1);
     }
     //鼠标离开 图片继续
     banner.onmouseout = function () { 
     	 time1 = setInterval(run,time);
     }
     //鼠标离开 选择区域 图片继续
     num1.onmouseout =  function () {
     	 time1 = setInterval(run,time);
     }
     toleft.onmouseout = function () {
     	time1 = setInterval(run,time);
     }
     toright.onmouseout = function () {
     	time1 = setInterval(run,time);
     }
     //点击小点 切换到对应的图片
     function ckickNum(i){
          click_btn[i].onclick = function () {
          	//把I赋值给num 且执行run方法 
          	num=i;
          	run();
          }
     }
     toright.onclick = function () {
     	run();
     }
     toleft.onclick = function () {
     	  if(num==0){
     	  	//当显示最后一张图片时
     	  	num=banner_img.length-2;
     	  }else if(num==1){
     	  	//当显示第一张图片时
     	  	num=banner_img.length-1;
     	  }else{
     	  	num-=2;
     	  }
     	  run();
     }
     //定时器 没1秒执行一次run方法
     var time1 = setInterval(run,time);
</script>
</html>